<template>
  <view class="bank_list_view" v-if="!loading">
    <view v-if="!bankList || bankList.length == 0" class="no-bank">
      <view class="BankCardImage">
        <image src="/static/image/BankCardImage.png" class="no-bank-img"></image>
      </view>
      <view class="Tips">您还没有添加银行卡</view>
    </view>
    <block v-else>
      <scroll-view class="scroll-wrap" :scroll-y="true">
        <view class="has-bank" v-for="(item, index) in bankList" :key="item.id" @click="bankItemClick(item, index)">
         <uni-swipe-action>
            <uni-swipe-action-item :options="item.options" :show="item.isEdit" :auto-close="false" @click="swipeClick" @change="swipeChange">
              <view class="bank-wrap">
                <view class="bank-info">
                  <view class="logo-wrap">
                    <image :src="item.icon || '/static/image/BankCardImage.png'" mode="" class="logo"></image>
                  </view>
                  <view class="bank-name">
                    <view class="title">
                      {{item.bankName}}
                    </view>
                    <view class="type">
                      储蓄卡
                    </view>
                  </view>
                  <view class="common-bank" v-if="!item.identify">公户</view>
                </view>
                <view class="bank-num">
                  {{item.cardNumber}}
                </view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </scroll-view>
    </block>
    
    <!-- 点击添加银行卡的时候需要弹出的提示弾层 -->
    <uni-popup ref="popup" type="center" :show="tipModal.show" class="tipModal" :maskClick="false">
      <view class="tip-title">
        提现银行卡要求：
      </view>
      <view class="tip-content">
        <view class="tip">
          1、企业类型用户提现时，必须提供对公的银行账户（与营业执照同名的公款账户）；
        </view>
        <view class="tip">
          2、个体商户提现时，需提供本人名下的银行卡；
        </view>
        <view class="tip">
          3、为了不影响您的提现进度，请根据要求进行添加。
        </view>
      </view>
      <view class="footer">
        <button type="primary" class="confirm-btn" @click="addBankCardClick">我知道了</button>
      </view>
    </uni-popup>
    <!--  -->
    
    <view class="uni-padding-wrap uni-common-mt">
      <button type="primary" @click="edit" class="editBtn" v-if="bankList && bankList.length > 0">{{isEdit ? '取消' : '编辑'}}</button>
      <button type="primary" @click="openTipModal" class="addBtn" :style="{width: bankList && bankList.length > 0 ? '408rpx' : '668rpx'}">添加银行卡</button>
    </view>
  </view>
</template>

<script>
import { BankCardFindBankList, BankCardDeleteById } from '@/service/user/user.service.js'
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action/uni-swipe-action.vue'
import uniSwipeActionItem from '@/components/uni-swipe-action/uni-swipe-action-item/uni-swipe-action-item.vue'
import uniPopup from '@/components/uni-popup/components/uni-popup/uni-popup.vue'
export default{
  components: {
    uniSwipeAction,
    uniSwipeActionItem,
    uniPopup
  },
  data() {
    return {
      tipModal: { // 提示弹窗
        show: false
      },
      operationType: null, //
      loading: true,
      status: 0,
      bankList: [],
      isEdit: false,
      options: [
        {
          text: '',
          value: 'del',
          style: {
            backgroundImage: 'url("/static/image/user/del.png")',
            backgroundSize: '44rpx 44rpx',
            backgroundRepeat: 'no-repeat',
            textAlign: 'center',
            margin: '68rpx 0rpx 0rpx 38rpx'
          }
        }
      ]
    }
  },
  onLoad (option) {
    this.operationType = option.operationType;
    if (this.operationType && this.operationType == 1) {
      this.options.push({
        text: '',
        value: 'select',
        style: {
          backgroundImage: 'url("/static/image/bank/select.png")',
          backgroundSize: '44rpx 44rpx',
          backgroundRepeat: 'no-repeat',
          textAlign: 'center',
          margin: '68rpx 0rpx 0rpx 38rpx'
        }
      });
    }
  },
  onShow () {
    this.loading = true;
    this.getCardList();
  },
  methods: {
    bankItemClick (item, index) {
      this.bankList[index].isEdit = !item.isEdit
      // console.log(this.bankList[index]);
    },
    openTipModal () {
      this.tipModal.show = true;
    },
    swipeChange (e) {
      // console.log('ceshi:', e);
    },
    swipeClick (e) {
      if (e.content.value == 'del') {
        this.bankList[e.content.itemIndex].isEdit = true;
        this.deleteBank(this.bankList[e.content.itemIndex], e.content.itemIndex);
      } else if (e.content.value == 'select') {
        uni.setStorageSync('selectedBank', this.bankList[e.content.itemIndex]);
        uni.redirectTo({
          url: '/pages/cashWithDrawal/index?hasSelected=true'
        });
      }
    },
    getCardList () { // 获取银行卡列表
      uni.showLoading();
      BankCardFindBankList({
      }, (res) => {
        if (res.status == 0) {
          res.data.forEach((item, index) => {
            item.isEdit = false;
            let opt = JSON.parse(JSON.stringify(this.options));
            opt.forEach(item => {
              item.itemIndex = index;
            });
            item.options = opt;
          });
          this.bankList = res.data;
          
        }
        this.loading = false;
      })
      uni.hideLoading();
    },
    //删除用户绑定银行卡
    deleteBank (item, index) {
      let that = this;
      uni.showModal({
        title: '',
        content: '确认删除银行卡',
        confirmColor: '#F6DA99',
        cancelColor: '#FFFFFF',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading();
            BankCardDeleteById({
              id : item.id,
            }, (res) => {
              if (res.status == 0) {
                uni.showToast({
                  title:"删除成功！",
                  success: () => {
                    setTimeout(function () {
                      that.isEdit = false;
                      that.getCardList();
                    }, 2000)
                  }
                })
              }
              uni.hideLoading();
            }, null, {showErrorMsg: true})
          }
          if (res.cancel) {
            this.bankList[index].isEdit = true;
          }
        }
      })
      
    },
    edit () {
      this.isEdit = !this.isEdit;
      this.bankList.forEach(item => {
        item.isEdit = this.isEdit;
      });
    },
    addBankCardClick () {
      this.tipModal.show = false;
      uni.navigateTo({
        url:'/pages/user/addBankCard?operationType=' + (this.operationType || 2),
      })
    }
  }, 
}
</script>
<style lang="scss" scoped>
  .common-bank {
    width: 90rpx;
    height: 30rpx;
    line-height: 30rpx;
    margin-left: 11rpx;
    text-align: center;
    font-size: 26rpx;
    background-color: #FFB911;
    color: #F7F8F6;
    border-top-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
  }
  .bank_list_view {
    // 弹框提示start
    .tipModal {
      .tip-title {
        height: 70rpx;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        border-bottom: 2rpx solid #E1E1E1;
      }
      .tip-content {
        margin: 40rpx 0 20rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 36rpx;
        .tip {
          &:last-child {
            margin-top: 30rpx;
          }
        }
      }
      .footer {
        height: 98rpx;
        display: flex;
        align-items: flex-end;
        button {
          width: 460rpx;
          height: 60rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
        }
        .confirm-btn {
          color: #F6DA99;
          background-color: #434343;
          border-radius: 12rpx;
        }
      }
    }
    // 弹窗提示相关end
    .scroll-wrap {
      height: calc(100vh - 52px);
      background-color: #FAFAFA;
    }
    .no-bank {
      padding-top: 151rpx;
      .BankCardImage {
        width: 465rpx;
        height: 465rpx;
        // margin: 151rpx 0 0 143rpx;
        margin: 0 auto 0;
        // border: 2rpx dashed #888888;
        
        .no-bank-img {
          width: 465rpx;
          height: 465rpx;
        }
      }
      .Tips{
        margin-top:50rpx;
        text-align: center;
        font-size: 32rpx;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(153,153,153,1);
        line-height:36rpx;
      }
    }
    .has-bank {
      padding: 20rpx 32rpx 0;
      margin-bottom: 10rpx;
      .bank-wrap {
        width: 688rpx;
        height: 180rpx;
        background-color: #2D425E;
        border-radius: 10rpx 10rpx 0 0;
        .bank-info {
          padding: 16rpx 36rpx 0;
          height: 68rpx;
          display: flex;
          .logo-wrap {
            width: 68rpx;
            height: 68rpx;
            background-color: #FFFFFF;
            border-radius:50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .logo {
              width: 60rpx;
              height: 60rpx;
              border-radius:50%;
            }
          }
          
          .bank-name {
            margin-left: 20rpx;
            color: #FFFFFF;
            display: flex;
            flex-flow: column;
            // justify-content: center;
            .title {
              // margin-top: 8rpx;
              font-size: 26rpx;
              font-family: PingFang-SC-Medium;
            }
            .type {
              // margin-top: 4rpx;
              font-family: PingFang-SC-Regular;
              font-size: 22rpx;
            }
          }
        }
        
        .bank-num {
          margin-left: 124rpx;
          margin-top: 40rpx;
          color: #FFFFFF;
          font-family: PingFang-SC-Regular;
          font-size: 38rpx;
          font-weight:bold;
        } 
      }
    }
  }
 
  /* 下面的button按钮 */
  .uni-common-mt{
    width: 100%;
    position:fixed;
    bottom:0;
    height: 112rpx;
    border-top: 2rpx solid #E1E1E1;
    background-color: #FFFFFF;
    display: flex;
    button {
      // width: 687rpx;
      // height: 70rpx;
      // background: #434343;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      // color: rgba(246, 218, 153, 1);
      margin: 21rpx auto;
      border-radius: 10rpx;
    }
    
    .editBtn {
      background-color: #F6DA99;
      width: 260rpx;
      color: #434343;
    }
    
    .addBtn {
      background-color: #434343;
      width: 408rpx;
      color: #F6DA99;
    }
  }
</style>
